<script setup lang="ts">
import { ref } from 'vue';
//@ts-ignore
import Header from '../components/Header.vue';

//@ts-ignore
import Footer from '../components/Footer.vue';
//@ts-ignore
import { Search, Calendar, StarFilled, Location } from '@element-plus/icons-vue';

// 酒店数据
const hotels = ref([
  {
    id: 1,
    name: '巴黎丽兹酒店',
    location: '法国巴黎',
    price: '¥2,680',
    rating: 4.9,
    reviews: 1245,
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.ttkLOqTVw1HOKQRvCrDxmAHaEG?rs=1&pid=ImgDetMain',
    amenities: ['免费WiFi', '游泳池', 'SPA', '健身中心', '餐厅'],
    description: '位于巴黎市中心的奢华五星级酒店，提供无与伦比的服务和设施。'
  },
  {
    id: 2,
    name: '东京安缦酒店',
    location: '日本东京',
    price: '¥3,200',
    rating: 4.8,
    reviews: 876,
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Fx-kLU5mlCGya07o8QiNnQHaE7?rs=1&pid=ImgDetMain',
    amenities: ['免费WiFi', '温泉', '日式庭院', '健身中心', '餐厅'],
    description: '融合现代设计与传统日式美学的豪华酒店，位于东京市中心。'
  },
  {
    id: 3,
    name: '马尔代夫康莱德',
    location: '马尔代夫',
    price: '¥5,800',
    rating: 4.9,
    reviews: 1023,
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.c4Q_Y833lytgPADD6ZJY-gHaE8?rs=1&pid=ImgDetMain',
    amenities: ['水上别墅', '私人泳池', '浮潜设备', 'SPA', '多家餐厅'],
    description: '位于马尔代夫的奢华度假村，提供水上别墅和无与伦比的海景。'
  },
  {
    id: 4,
    name: '纽约四季酒店',
    location: '美国纽约',
    price: '¥3,500',
    rating: 4.7,
    reviews: 1542,
    image: 'https://resource.36dong.com/resource/20180815/5da2a19f1075b2e3a503d87387316147.jpg',
    amenities: ['免费WiFi', '健身中心', 'SPA', '商务中心', '餐厅'],
    description: '位于曼哈顿中心的豪华酒店，提供一流的服务和设施。'
  },
  {
    id: 5,
    name: '巴厘岛悦榕庄',
    location: '印度尼西亚巴厘岛',
    price: '¥2,300',
    rating: 4.8,
    reviews: 1876,
    image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.z5Hv8Yec-TxAwfTZ-_8cBQHaEK?rs=1&pid=ImgDetMain',
    amenities: ['私人泳池', 'SPA', '海滩', '瑜伽课程', '多家餐厅'],
    description: '坐落在巴厘岛悬崖上的度假村，提供壮观的海景和私密的别墅。'
  },
  {
    id: 6,
    name: '威尼斯格里蒂宫殿酒店',
    location: '意大利威尼斯',
    price: '¥2,800',
    rating: 4.7,
    reviews: 923,
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Bk5CyRjx4lRDiAwZhikuYQHaE7?rs=1&pid=ImgDetMain',
    amenities: ['运河景观', '历史建筑', '米其林餐厅', '酒吧', '礼宾服务'],
    description: '位于威尼斯大运河边的历史宫殿改建而成的豪华酒店。'
  },
  {
    id: 7,
    name: '迪拜帆船酒店',
    location: '阿联酋迪拜',
    price: '¥6,500',
    rating: 4.9,
    reviews: 2145,
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.e4c5bf038bdbcf6aae44ad587f581cb0?rik=9Cbmwx3B8OA2TA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fphotoblog%2f1902%2f22%2fc3%2f133805854_1550806725972.jpg&ehk=MjRkbBeshBXwIY%2ffaFObyP2ng5cpiizP7sdsh25C%2f7M%3d&risl=&pid=ImgRaw&r=0',
    amenities: ['海景', '私人海滩', '水下餐厅', '直升机停机坪', '豪华SPA'],
    description: '迪拜标志性的七星级酒店，提供无与伦比的奢华体验。'
  },
  {
    id: 8,
    name: '上海外滩华尔道夫酒店',
    location: '中国上海',
    price: '¥2,100',
    rating: 4.6,
    reviews: 1532,
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.Oh6FhlgpiH93MPA739DrygHaEl?rs=1&pid=ImgDetMain',
    amenities: ['外滩景观', '免费WiFi', 'SPA', '健身中心', '多家餐厅'],
    description: '位于上海外滩的豪华酒店，提供黄浦江和外滩的壮丽景色。'
  }
]);

// 搜索和筛选
const searchKeyword = ref('');
const selectedLocation = ref('');
const selectedPrice = ref('');
const selectedRating = ref(0);

// 日期选择
const checkInDate = ref('');
const checkOutDate = ref('');
const guestCount = ref(2);

// 位置选项
const locations = ref([
  '法国巴黎',
  '日本东京',
  '马尔代夫',
  '美国纽约',
  '印度尼西亚巴厘岛',
  '意大利威尼斯',
  '阿联酋迪拜',
  '中国上海'
]);

// 价格范围选项
const priceRanges = ref([
  { label: '所有价格', value: '' },
  { label: '¥0 - ¥1,000', value: '0-1000' },
  { label: '¥1,000 - ¥2,000', value: '1000-2000' },
  { label: '¥2,000 - ¥3,000', value: '2000-3000' },
  { label: '¥3,000 - ¥5,000', value: '3000-5000' },
  { label: '¥5,000+', value: '5000+' }
]);

// 筛选方法
const filteredHotels = () => {
  let result = hotels.value;
  
  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(hotel => 
      hotel.name.toLowerCase().includes(keyword) || 
      hotel.location.toLowerCase().includes(keyword) ||
      hotel.description.toLowerCase().includes(keyword)
    );
  }
  
  // 位置筛选
  if (selectedLocation.value) {
    result = result.filter(hotel => hotel.location === selectedLocation.value);
  }
  
  // 评分筛选
  if (selectedRating.value > 0) {
    result = result.filter(hotel => hotel.rating >= selectedRating.value);
  }
  
  // 价格筛选
  if (selectedPrice.value) {
    const [min, max] = selectedPrice.value.split('-').map(Number);
    if (max) {
      result = result.filter(hotel => {
        const price = Number(hotel.price.replace(/[^0-9.-]+/g, ''));
        return price >= min && price <= max;
      });
    } else {
      // 处理 5000+ 的情况
      result = result.filter(hotel => {
        const price = Number(hotel.price.replace(/[^0-9.-]+/g, ''));
        return price >= min;
      });
    }
  }
  
  return result;
};

// 当前页码
const currentPage = ref(1);
const itemsPerPage = 4;

// 计算总页数
const totalPages = () => {
  return Math.ceil(filteredHotels().length / itemsPerPage);
};

// 获取当前页的酒店
const currentPageHotels = () => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return filteredHotels().slice(start, end);
};

// 页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

// 生成星级评分
const generateStars = (rating: number) => {
  const stars = [];
  for (let i = 1; i <= 5; i++) {
    stars.push(i <= rating);
  }
  return stars;
};

// 重置筛选条件
const resetFilters = () => {
  searchKeyword.value = '';
  selectedLocation.value = '';
  selectedPrice.value = '';
  selectedRating.value = 0;
  checkInDate.value = '';
  checkOutDate.value = '';
  guestCount.value = 2;
};
</script>

<template>
  <div class="hotel-page">
    <Header />
    
    <div class="search-container">
      <div class="container">
        <div class="search-box">
          <h2>查找您理想的酒店</h2>
          
          <el-form class="search-form">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索酒店名称、地点或设施"
              class="search-input"
              :prefix-icon="Search"
            />
            
            <div class="search-row">
              <el-select v-model="selectedLocation" placeholder="选择目的地" class="location-select">
                <el-option v-for="loc in locations" :key="loc" :label="loc" :value="loc" />
              </el-select>
              
              <div class="date-picker-group">
                <el-date-picker
                  v-model="checkInDate"
                  type="date"
                  placeholder="入住日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
                <el-date-picker
                  v-model="checkOutDate"
                  type="date"
                  placeholder="退房日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                />
              </div>
              
              <el-select v-model="selectedPrice" placeholder="价格区间" class="price-select">
                <el-option
                  v-for="range in priceRanges"
                  :key="range.value"
                  :label="range.label"
                  :value="range.value"
                />
              </el-select>
              
              <el-select v-model="selectedRating" placeholder="最低评分" class="rating-select">
                <el-option :value="0" label="所有评分" />
                <el-option
                  v-for="rating in [4, 4.5, 5]"
                  :key="rating"
                  :label="`${rating}分以上`"
                  :value="rating"
                />
              </el-select>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    
    <div class="results-container">
      <div class="container">
        <h2 class="results-title">为您找到 {{ filteredHotels().length }} 个酒店</h2>
        
        <div class="hotel-grid">
          <el-card
            v-for="hotel in currentPageHotels()"
            :key="hotel.id"
            class="hotel-card"
            :body-style="{ padding: '0px' }"
            shadow="hover"
          >
            <img :src="hotel.image" class="hotel-image" />
            <div class="hotel-content">
              <h3>{{ hotel.name }}</h3>
              <div class="hotel-location">
                <el-icon><Location /></el-icon>
                <span>{{ hotel.location }}</span>
              </div>
              <div class="hotel-rating">
                <span class="stars">
                  <el-icon v-for="(isFilled, index) in generateStars(hotel.rating)" :key="index">
                    <StarFilled v-if="isFilled" style="color: #FFD700;" />
                    <StarFilled v-else style="color: #E0E0E0;" />
                  </el-icon>
                </span>
                <span class="rating-value">{{ hotel.rating }}</span>
                <span class="reviews-count">({{ hotel.reviews }}条评论)</span>
              </div>
              <div class="hotel-amenities">
                <span v-for="(amenity, index) in hotel.amenities.slice(0, 3)" :key="index" class="amenity-tag">
                  {{ amenity }}
                </span>
                <span v-if="hotel.amenities.length > 3" class="amenity-more">+{{ hotel.amenities.length - 3 }}</span>
              </div>
              <p class="hotel-description">{{ hotel.description }}</p>
              <div class="hotel-price-row">
                <div class="price">{{ hotel.price }} <span class="per-night">/ 晚</span></div>
                <el-button type="primary">查看详情</el-button>
              </div>
            </div>
          </el-card>
        </div>
        
        <div class="pagination-container" v-if="filteredHotels().length > 0">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="itemsPerPage"
            :total="filteredHotels().length"
            :pager-count="5"
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
          />
        </div>
        
        <div class="no-results" v-if="filteredHotels().length === 0">
          <el-empty description="没有找到符合条件的酒店" />
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<style scoped>
.hotel-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.search-container {
  background-color: #0066cc;
  padding: 40px 0;
  color: white;
}

.search-box {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
}

.search-box h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.location-select,
.price-select,
.rating-select {
  flex: 1;
  min-width: 150px;
}

.date-picker-group {
  display: flex;
  gap: 10px;
  flex: 2;
}

.date-picker-group :deep(.el-input__wrapper) {
  width: 100%;
}

.results-container {
  flex: 1;
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.results-title {
  margin-bottom: 25px;
  font-size: 20px;
  color: #333;
}

.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.hotel-card {
  border: none;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.hotel-image {
  height: 250px;
  width: 100%;
  object-fit: cover;
}

.hotel-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hotel-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

.hotel-location {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.hotel-location i {
  margin-right: 5px;
  font-size: 16px;
}

.hotel-rating {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.stars {
  display: flex;
  margin-right: 5px;
}

.rating-value {
  font-weight: bold;
  margin-right: 5px;
}

.reviews-count {
  color: #666;
  font-size: 14px;
}

.hotel-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.amenity-tag {
  background-color: #f0f8ff;
  color: #0066cc;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.amenity-more {
  color: #666;
  font-size: 12px;
}

.hotel-description {
  margin-bottom: 15px;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

.hotel-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.price {
  font-size: 22px;
  font-weight: bold;
  color: #0066cc;
}

.per-night {
  font-size: 14px;
  font-weight: normal;
  color: #666;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.no-results {
  margin: 50px 0;
  text-align: center;
}

@media (max-width: 768px) {
  .search-row {
    flex-direction: column;
  }
  
  .hotel-grid {
    grid-template-columns: 1fr;
  }
}
</style> 